<template>
  <!-- 车品 - 筛选下拉菜单 -->
  <view class="car-goods-filter">
    <view :class="downStatus ? 'down-open':'down-close'">
      <u-dropdown active-color="#FDD421" ref="uDropdown" @open="open" @close="close">
        <u-dropdown-item :title="typeTitle || '全部分类'" :options="carGoodsTypes" @change="categoryChange" v-model="categoryVal" height="800rpx"></u-dropdown-item>
        <u-dropdown-item :title="sortTitle || '排序'" :options="sortList" v-model="sortVal" @change="sortChange"></u-dropdown-item>
      </u-dropdown>      
    </view>
  </view>
</template>

<script>
  export default {
    name: 'carGoodsFilter',
    props: {
      categoryList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        typeTitle: '全部分类',  // 分类标题
        sortTitle: '',  // 排序标题
        // 车品分类
        carGoodsTypes: [{
            label: '全部分类',
            value: -1
          },
          {
            label: '空调养护',
            value: 0
          },
          {
            label: '刹车养护',
            value: 1
          },
          {
            label: '水箱养护',
            value: 2
          },
          {
            label: '除碳提动力',
            value: 3
          },
          {
            label: '车载电器',
            value: 4
          },
          {
            label: '内饰精品',
            value: 5
          },
          {
            label: '清洗养护',
            value: 6
          },
          {
            label: '工具设备',
            value: 7
          }
        ],
        
        // 排序条件列表
        sortList: [{
            label: '默认排序',
            value: 0
          },
          {
            label: '价格由低到高',
            value: 1
          },
          {
            label: '位置由近到远',
            value: 2
          }
        ],
        
        categoryVal: -1, // 选中的分类
        sortVal: 0,  // 选中的排序值
        downStatus: false, // 控制下拉菜单容器的高度
      }
    },
    
    watch: {
      categoryList(val) {
        this.carGoodsTypes = [{ label: '全部分类', value: '-1' }, ...val]
      }
    },
    
    methods: {
      // 选择分类方法
      categoryChange(val) {
        this.typeTitle = this.carGoodsTypes.find(item => item.value === val).label
        this.$emit('change', { type: 0, id: val === '-1' ? '' : val })
      },
      
      // 选择排序方法
      sortChange(val) {
        this.sortTitle = this.sortList.find(item => item.value === val).label
        this.$emit('change', { type: 1, id: val })
      },
      
      open(index) {
        this.downStatus = true
        this.$emit('open', index)
      },
      close(index) {
        this.downStatus = false
        this.$emit('close', index)
      }
    }
  }
</script>

<style lang="scss" scoped>
.car-goods-filter {
  position: relative;
  background-color: #fff;
  
  // 下拉菜单打开时，给下拉菜单设置高度
  .down-open {
    & /deep/ .u-dropdown__content {
      height: 100vh !important;
    }
  }
  .down-close {
    & /deep/ .u-dropdown__content {
      height: 0 !important;
    }
  }
}
</style>
